<template>
  <div>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="getMonthlyReport()">月度报表</a>
              <a @click="getQuarterlyReport()">季度报表</a>
              <a @click="getAnnualReport()">年度报表</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>
          <a-tab-pane loading="true" tab="充值额" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData" title="充值额排行" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>

        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { baseMixin } from '@/store/app-mixin'
import statisticsApi from '@/api/statistics'

const barData = []
const barData2 = []

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      queryParam: {},
      loading: true,
      rankList,

      barData,
      barData2,

      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    statisticsApi.getConsumeMonthlyReport(this.queryParam).then(res => {
      if (res.code === 200) {
        for (let i = 0; i < res.data.xCoordinatesList.length; i++) {
          this.barData.push({
            x: `${res.data.xCoordinatesList[i]}月`,
            y: res.data.yCoordinatesList[i]
          })
        }
      }
    })
  },
  methods: {
    getMonthlyReport () {
      statisticsApi.getConsumeMonthlyReport(this.queryParam).then(res => {
        if (res.code === 200) {
          this.barData = []
          for (let i = 0; i < res.data.xCoordinatesList.length; i++) {
            this.barData.push({
              x: `${res.data.xCoordinatesList[i]}日`,
              y: res.data.yCoordinatesList[i]
            })
          }
        }
        console.log(res)
      })
    },
    getQuarterlyReport () {
      statisticsApi.getConsumeQuarterlyReport(this.queryParam).then(res => {
        if (res.code === 200) {
          this.barData = []
          for (let i = 0; i < res.data.xCoordinatesList.length; i++) {
            this.barData.push({
              x: `第${res.data.xCoordinatesList[i]}季度`,
              y: res.data.yCoordinatesList[i]
            })
          }
        }
      })
    },
    getAnnualReport () {
      statisticsApi.getConsumeAnnualReport().then(res => {
        if (res.code === 200) {
          this.barData = []
          for (let i = 0; i < res.data.xCoordinatesList.length; i++) {
            this.barData.push({
              x: `${res.data.xCoordinatesList[i]}年`,
              y: res.data.yCoordinatesList[i]
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);

  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: color .32s;
    color: black;
  }
}

.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>
